<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/jsp/common/common.jsp" %>
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <title>部门动迁数据</title>
    <link rel="stylesheet" href="/seeyon/apps_res/plugin/relocationData/css/common.css">
    <link rel="stylesheet" href="/seeyon/apps_res/plugin/relocationData/css/index-common.css?v=5">
    <script src="/seeyon/apps_res/plugin/common/js/vue.min.js"></script>
    <script src="/seeyon/apps_res/plugin/common/js/jquery.min.js"></script>
</head>

<body>
    <input id="hasLeader" type="hidden" value="${hasLeader}">
    <div id="app">
        <div class="calendar">
            <div class="month-title">
                <div @click="changeYear(-1)" class="pointer">
                    <img src="/seeyon/apps_res/plugin/relocationData/img/more.svg" style="rotate: 180deg;" />
                    <img src="/seeyon/apps_res/plugin/relocationData/img/more.svg" style="rotate: 180deg; position: relative; right: 6px; top: 0;" />
                </div>
                <div>
                    <img @click="changeMonth(-1)" class="pointer" src="/seeyon/apps_res/plugin/relocationData/img/more.svg" style="rotate: 180deg;" />&nbsp;
                    {{getDateFormat(new Date(current_date.year, current_date.month, current_date.date))}}&nbsp;
                    <img @click="changeMonth(1)" class="pointer" src="/seeyon/apps_res/plugin/relocationData/img/more.svg" />
                </div>
                <div @click="changeYear(1)" class="pointer">
                    <img src="/seeyon/apps_res/plugin/relocationData/img/more.svg" style="position: relative; right: -6px; top: 0;" />
                    <img src="/seeyon/apps_res/plugin/relocationData/img/more.svg" />
                </div>
            </div>
            <div class="month-content">
                <div class="week">
                    <div class="week-day" v-for="item in weekDay" :key="item">{{ item }}</div>
                </div>
                <div class="content">
                    <div class="days">
                        <div class="item" v-for="(item, i) in all_data" :key="item">
                            <div class="day" :style="getStyle(item)">
                                {{ item.date }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="status-block">
            <ul class="pointer">
                <li class="on-site-block" @click="goToDetailPage('on_site')">
                    <p class="text">On Site</p>
                    <p class="on_site_color num">
                        <img src="/seeyon/apps_res/plugin/relocationData/img/on-site.svg" /> {{on_site_num}}
                    </p>
                </li>
                <li class="trip-block" @click="goToDetailPage('business_trip')">
                    <p class="text">Business Trip</p>
                    <p class="business_trip_color num">
                        <img src="/seeyon/apps_res/plugin/relocationData/img/trip.svg" /> {{business_trip_num}}
                    </p>
                </li>
                <li class="leave-block" @click="goToDetailPage('routation_leave')">
                    <p class="text">Routation Leave</p>
                    <p class="routation_leave_color num">
                        <img src="/seeyon/apps_res/plugin/relocationData/img/leave.svg" /> {{routation_leave_num}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    function setIframeHeightToContent() {
        let iframe = window.frameElement;
        let height = '280px';
        if (iframe) {
            // 获取iframe内容的高度
            let contentHeight = document.body.scrollHeight;
            // 设置iframe的高度
            iframe.style.height =  height;
            $(iframe).parent().css('height', height);
            $(iframe).parent().css('overflow', 'hidden');
        }
    }
    // 调用函数
    setIframeHeightToContent();
    
    let today = new Date();
    let app = new Vue({
        el: '#app',
        mounted() {
            if ($('#hasLeader').val() && $('#hasLeader').val() == 'true') {
                this.changeDate();
            } else {
                $('#app').html('<p style="color: #333; font-size: 12px;">Sorry, you do not have permission to view this dashboard.</p>');
            }
        },
        data: {
            weekstart: 1,   // 第一列星期几
            current_date: {
                year: today.getFullYear(),
                month: today.getMonth(),
                date: today.getDate(),
            },
            week_datas: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            all_data: [],
            on_site_num: 0,
            business_trip_num: 0,
            routation_leave_num: 0,
        },
        computed: {
            // 顶部星期栏目
            weekDay() {
                return this.week_datas.slice(this.weekstart - 1).concat(this.week_datas.slice(0, this.weekstart - 1));
            },
        },
        methods: {
            changeYear: function (num) {
                this.current_date.year = this.current_date.year + num;
                this.changeDate();
            },
            changeMonth: function (num) {
                let month = this.current_date.month + num;
                if (month == 12) {
                    month = 0;
                    this.current_date.year += 1;
                } else if (month == -1) {
                    month = 11;
                    this.current_date.year -= 1;
                }
                this.current_date.month = month;
                this.changeDate();
            },
            changeDate: function () {
                this.getData();
                this.all_data = this.getAllDatesInMonth(this.current_date.year, this.current_date.month)
            },
            getData: function () {
                let vm = this;
                $.get('/seeyon/ebsRc.do?method=leadershipAgendaColumn', {
                    // TODO 具体日期
                })
                .done(function(res) {
                    vm.on_site_num = res.onSite || '0';
                    vm.business_trip_num = res.bt || '0';
                    vm.routation_leave_num = res.rl || '0';
                })
            },
            getDateFormat: function (date) {
                let newDate = new Date(date);
                let year = newDate.getFullYear();
                let month = newDate.getMonth() + 1;
                let day = newDate.getDate();
                month = month >= 10 ? month : '0' + month;
                day = day >= 10 ? day : '0' + day;
                return year + '-' + month + '-' + day;
            },
            getAllDatesInMonth: function (y, m) {
                let vm = this;
                let firstDayOfMonth = new Date(y, m, 1).getDay() // 当月第一天星期几
                let lastDateOfMonth = new Date(y, m + 1, 0).getDate() // 当月最后一天
                let lastDayOfLastMonth = new Date(y, m, 0).getDate() // 上一月的最后一天
                let dates = [] // 所有渲染日历
                let weekstart = this.weekstart == 7 ? 0 : this.weekstart; // 方便进行日期计算，默认星期从0开始
                let startDay = (() => {
                    // 周初有几天是上个月的
                    if (firstDayOfMonth == weekstart) {
                        return 0
                    } else if (firstDayOfMonth > weekstart) {
                        return firstDayOfMonth - weekstart
                    } else {
                        return 7 - weekstart + firstDayOfMonth
                    }
                })()
                let endDay = 7 - ((startDay + lastDateOfMonth) % 7) // 结束还有几天是下个月的
                for (let i = 1; i <= startDay; i++) {
                    dates.push({
                        date: lastDayOfLastMonth - startDay + i,
                        day: weekstart + i - 1 || 7,
                        month: m - 1 >= 0 ? m - 1 : 12,
                        year: m - 1 >= 0 ? y : y - 1
                    })
                }
                for (let j = 1; j <= lastDateOfMonth; j++) {
                    dates.push({
                        date: j,
                        day: (j % 7) + firstDayOfMonth - 1 || 7,
                        month: m,
                        year: y,
                    })
                }
                for (let k = 1; k <= endDay; k++) {
                    dates.push({
                        date: k,
                        day: (lastDateOfMonth + startDay + weekstart + k - 1) % 7 || 7,
                        month: m + 1 <= 11 ? m + 1 : 0,
                        year: m + 1 <= 11 ? y : y + 1
                    })
                }
                return dates
            },
            isThisMonth(date_item, index) {
                let date = new Date(this.year, index);
                return date_item.year == date.getFullYear() && date_item.month == date.getMonth();
            },
            getStyle(date_item) {
                let vm = this;
                let color = '', background = '';
                let d1 = new Date(date_item.year, date_item.month, date_item.date).getTime();
                let today = new Date();
                let d2 = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
                if (date_item.year < today.getFullYear() || d1 < d2) {
                    color = '#000';
                } else if (d1 == d2) {
                    color = '#fff';
                    background = 'var(--backgroundBlue-color)';
                } else {
                    color = 'rgba(0, 0, 0, 0.3)';
                }
                return { 'color': color, 'background': background }
            },
            goToDetailPage (type) {
                let screenWidth = screen.width;
                let screenHeight = screen.height;
                let windowFeatures = "location=no,menubar=no,status=no,toolbar=no,resizable=yes,width=" + screenWidth + ",height=" + screenHeight;
                let url = '/seeyon/relocationDataControl.do?method=showPersonRelocation&type=' + type;
                let newWindow = window.open(url, '_blank', windowFeatures);
                if (newWindow) {
                    newWindow.moveTo(0, 0);
                }
            },
        }
    })
</script>
</html>